<template>
  <div class="context_whole">
    <div class="bgContext">
      <!-- <div class="backA1">
        <van-icon name="arrow-left" />
        <span @click="backA1">返回</span>
      </div>-->
      <div class="welcomeInfo">
        Hi, {{acc0}}!
        <br />Wecome back !
        <br />
        <span>当前会议:{{eventId}}</span>
      </div>
    </div>
    <div class="context">
      <div class="mainBtnGroup">
        <div
          v-for="(i, j) in navList"
          :key="i.id"
          class="mainBtn"
          :class="navList.length==1?'mainBtnAll':''"
        >
          <div
            class="mainInner"
            :class="j==currentId?'mainCurrent':''"
            @click="handleChildernBtnShow(j)"
          >
            <!-- <uni-icons :type="i.icon" size="30" color="#fff"></uni-icons> -->
            <van-icon :name="i.icon" size="30" />
          </div>
          <div>{{ i.title }}</div>
        </div>
      </div>
      <div class="bottomGroup">
        <div class="childrenBtnGroup">
          <div
            v-for="item in navList[currentId].navTo"
            :key="item.id"
            class="childrenBtn"
            @click="goPath(item.path,item.title)"
          >
            <!-- <uni-icons :type="item.icon" size="30" color="#4170FB"></uni-icons> -->
            <van-icon :name="item.icon" size="30" color="#8EC0FD" />
            <div>{{ item.title }}</div>
          </div>
        </div>
        <div :class="viewHeight>640?'cuService':'cuService1'">
          <span>如果您遇到任何问题请致电旅行服务台，电话：4008840068</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import apilist from "../utils/apiList";
import utils from "../utils/aes2";
import { GUID } from "../utils/dateFomat";
export default {
  data() {
    return {
      currentId: 0,
      eventId: "",
      acc0: "",
      viewHeight: 800,
      navList: [
        {
          id: "2",
          title: "名单收集",
          icon: "friends-o",
          navTo: [
            {
              id: "2-1",
              title: "新建HCP",
              path: "",
              icon: "edit",
            },
            {
              id: "2-2",
              title: "报名情况",
              path: "/lc_submit",
              icon: "description",
            },
            {
              id: "2-3",
              title: "草稿箱",
              path: "/sketch",
              icon: "envelop-o",
            },
          ],
        },
        {
          id: "3",
          title: "审批单",
          icon: "todo-list-o",
          navTo: [
            {
              id: "3-2",
              title: "本会议审批明细",
              path: "/approvelDetail",
              icon: "description",
            },
            {
              id: "3-1",
              title: "与我相关的所有会议",
              path: "/approvellist",
              icon: "newspaper-o",
            },
          ],
        },
      ],
    };
  },
  created() {
    this.viewHeight = document.documentElement.clientHeight;
    this.currentId = sessionStorage.getItem("currentPage") || 0;
    this.getUserInfo();
  },
  computed: {},
  methods: {
    // 获取用户登陆后的信息
    // https://www.muitlog.com/archives/107
    async getUserInfo() {
      let acc0 =
        this.$route.query.accountname ||
        JSON.parse(sessionStorage.getItem("accountname")).cName;
      this.acc0 = acc0;

      if (sessionStorage.getItem("changeApprovel")) {
        this.$router.push("/navigatorIndex");
        sessionStorage.removeItem("changeApprovel");
        this.eventId = JSON.parse(sessionStorage.getItem("eventid"));
      } else {
        if (this.$route.query.id) {
          sessionStorage.setItem(
            "eventid",
            JSON.stringify(this.$route.query.id)
          );
        }
        let eventId = this.$route.query.id;
        this.eventId = eventId || JSON.parse(sessionStorage.getItem("eventid"));
      }
      let { data } = await this.$axios({
        method: "get",
        url: apilist[0] + "/GetEvent?eventid=" + this.eventId,
        noloading: true,
      });
      sessionStorage.setItem("event", JSON.stringify(data));
      if (acc0 && (acc0 === data.ApplicantName || acc0 === data.OwnerName)) {
        sessionStorage.removeItem("join");
      } else {
        sessionStorage.setItem("join", 1);
      }

      let join = sessionStorage.getItem("join");
      if (join) {
        this.navList.splice(1, 1);
      }
      this.$axios
        .post(
          apilist[2] + "/api/partner/dispatch",
          utils.encrypt(
            '{"accountName":"' + acc0 + '","pageIndex":1,"pageSize":10}'
          ),
          {
            headers: { "EW-Access-Key": "Roche-Fasco-PageEmployees" },
          }
        )
        .then(function (res) {
          if (res.data.content.rows.length > 0) {
            if (!res.data.content.rows[0].chrisID) {
              res.data.content.rows[0].chrisID = new GUID().newGUID();
            }
            if (sessionStorage.getItem("accountname")) {
            } else {
              sessionStorage.setItem(
                "accountname",
                JSON.stringify(res.data.content.rows[0])
              );
            }
          } else {
            if (acc0) {
              var cc = {
                account: acc0,
                cName: acc0,
              };
              sessionStorage.setItem("accountname", JSON.stringify(cc));
            }
          }
        })
        .catch(function (error) {
          // _this.$message(
          // 				'读取信息失败'
          // 			);
        });
    },
    // 控制当前子菜单的显示
    handleChildernBtnShow(id) {
      this.currentId = id;
      sessionStorage.setItem("currentPage", JSON.stringify(id));
    },
    goPath(path, title) {
      if (title === "新建HCP") {
        window.location.href =
          "https://ezway.efasco.com/roche_meeting/dist/newhcp.html?eventId=" +
          this.eventId +
          "&acc0=" +
          this.acc0 +
          "&originpath=" +
          window.location.origin +
          window.location.pathname;
      } else {
        this.$router.push({ path });
      }
    },
  },
};
</script>

<style scoped lang="less">
.context_whole {
  height: 100%;
}
.bgContext {
  position: relative;
  height: 70%;
  width: 100%;
  background: url(../assets/images/airplane.jpg) no-repeat;
  background-size: 100% 100%;
  @media (min-width: 768px) {
    background-size: 100% auto;
  }
  clip-path: ellipse(164% 100% at 50% 0%);
  .backA1 {
    height: 46px;
    line-height: 46px;
    color: #fff;
    font-size: 14px;
    padding: 0 16px;
    font-weight: 600;
    .van-icon-arrow-left {
      position: relative;
      top: 2px;
      font-weight: 600;
    }
  }
  .welcomeInfo {
    position: absolute;
    top: 100px;
    z-index: 10;
    padding-left: 20px;
    font-size: 30px;
    @media (min-width: 768px) {
      font-size: 50px;
    }
    font-family: Arial-Black, Arial;
    font-weight: 900;
    color: #ffffff;
    span {
      font-size: 20px;
      font-weight: 400;
      @media (min-width: 768px) {
      font-size: 24px;
    }
    }
  }
}
.context {
  height: 30%;
  width: 100%;
  .mainBtnGroup {
    position: relative;
    top: -37px;
    width: 100%;
    display: flex;
    @media (min-width: 768px) {
       top: -46px;
      }
    .mainBtn {
      width: 50%;
      text-align: center;
      font-size: 14px;
      font-weight: 400;
      color: #343434;
      line-height: 24px;
      @media (min-width: 768px) {
       font-size: 16px;
      }
      .mainInner {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        width: 64px;
        height: 64px;
        border-radius: 50%;
        margin: 0 auto;
        background: linear-gradient(139deg, #68abe5 0%, #014099 100%);
        @media (min-width: 768px) {
        width: 76px;
        height: 76px;
      }
      }
      .mainCurrent {
        border: 1px solid rgb(57 175 220);
        box-shadow: rgb(57 175 220) 0 0px 10px 0px;
      }
    }
    .mainBtnAll {
      width: 100%;
    }
    .centerMainBtn {
      position: relative;
      top: 8px;
      .mainInner {
        width: 78px;
        height: 78px;
      }
    }
  }
  .bottomGroup {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .childrenBtnGroup {
    width: 100%;
    display: flex;
    margin-top: 15px;
    @media (max-width: 350px) {
      margin-top: -15px;
    }
    .childrenBtn {
      width: 33%;
      text-align: center;
      font-size: 12px;
      font-weight: 400;
      color: #343434;
      line-height: 24px;
      @media (min-width: 768px) {
        font-size: 16px;
      }
    }
  }
  .cuService {
    position: absolute;
    bottom: 10px;
    padding: 0 15px;
    font-size: 12px;
    box-sizing: border-box;
    width: 100%;
    span {
      font-size: 12px;
      @media (max-width: 350px) {
        display: inline-block;
        transform: scale(0.9);
        position: absolute;
        right: 0;
        bottom: 5px;
        -webkit-transform: scale(0.9);
      }
      @media (min-width: 768px) {
        font-size: 16px;
      }
    }
  }
  .cuService1 {
    padding: 0 15px;
    font-size: 12px;
    box-sizing: border-box;
    width: 100%;
    span {
      font-size: 12px;
      @media (max-width: 350px) {
        display: inline-block;
        transform: scale(0.9);
        position: absolute;
        right: 0;
        bottom: 5px;
        -webkit-transform: scale(0.9);
      }
    }
  }
}
</style>